<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置轮廓的样式</title>
    <style>
        p{border: 1px solid red;}
        p.dotted{outline-style: dotted;}
        p.solid{outline-style: solid;}
        p.double{outline-style: double;}
        p.groove{outline-style: groove;}
        p.ridge{outline-style: ridge;}
        p.inset{outline-style: inset;}
        p.outset{outline-style: outset;}
    </style>
</head>
<body>
    <p class="dotted">点线轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓</p>
    <p class="ridge">垄状轮廓</p>
    <p class="inset">嵌入轮廓</p>
    <p class="outset">外凸轮廓</p>  
</body>
</html>